<template>
    <div class="play-icons">
        <div class="flex icon-play" @click="musicPlay()">
            <n-icon size="20">
                <svg t="1628240392324" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="3068" width="200" height="200">
                    <path
                        d="M959.901158 643.014672a36.966795 36.966795 0 0 0-47.839382 21.399228c-62.8139 164.373745-223.283398 274.878764-399.271042 274.878764-235.63861 0-427.292664-191.654054-427.292665-427.243243 0-235.63861 191.654054-427.292664 427.292665-427.292664 221.257143 0 408.315058 172.528185 425.859459 392.796911l36.966795-2.965251-36.522007 9.241699 37.016216-2.32278 36.472587-9.834749C991.925869 213.152124 772.398456 10.625483 512.790734 10.625483 236.281081 10.625483 11.366795 235.539768 11.366795 512.049421c0 276.460232 224.914286 501.374517 501.423939 501.374517 206.579151 0 394.823166-129.630888 468.460231-322.520463a37.016216 37.016216 0 0 0-21.349807-47.888803z"
                        fill="#ffffff" p-id="3069"></path>
                    <path
                        d="M443.898069 309.275676a67.706564 67.706564 0 0 0-68.497297 0 67.706564 67.706564 0 0 0-34.248648 59.305019v286.83861c0 24.759846 12.8 46.949807 34.248648 59.35444 10.724324 6.177606 22.486486 9.29112 34.199228 9.29112 11.762162 0 23.573745-3.113514 34.248649-9.29112l248.389189-143.419305c21.448649-12.355212 34.199228-34.495753 34.199228-59.305019a67.706564 67.706564 0 0 0-34.199228-59.255599L443.898069 309.275676z m-28.664092 336.407722v-267.366796l231.487259 133.683398-231.487259 133.683398z"
                        fill="#ffffff" p-id="3070"></path>
                </svg>
            </n-icon>
            <p class="text-white mx-2">播放</p>
        </div>
        <div class="flex icon-collect">
            <n-icon size="20">
                <svg t="1628241310757" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="5958" width="200" height="200">
                    <path
                        d="M799.97 959.56H224.03c-65.18 0-118.22-53.01-118.22-118.19v-659.2c0-65.18 53.04-118.22 118.22-118.22h409.16c31.58 0 61.27 12.31 83.59 34.63l166.78 166.78c22.32 22.32 34.63 52.01 34.63 83.59v492.42c0 65.18-53.04 118.19-118.22 118.19zM224.03 131.88c-27.73 0-50.29 22.56-50.29 50.29v659.2c0 27.7 22.56 50.25 50.29 50.25h575.94c27.73 0 50.29-22.56 50.29-50.25V348.95c0-13.43-5.24-26.07-14.73-35.56L668.75 146.61c-9.49-9.49-22.12-14.73-35.56-14.73H224.03z"
                        p-id="5959" fill="#707070"></path>
                    <path
                        d="M644.87 750.18a33.91 33.91 0 0 1-15.82-3.91l-117.06-61.53-117.03 61.53c-11.41 6.04-25.24 5.08-35.79-2.59-10.45-7.6-15.69-20.47-13.5-33.2l22.36-130.33-94.74-92.35c-9.25-9.02-12.57-22.52-8.59-34.8a33.975 33.975 0 0 1 27.43-23.12l130.89-19.04 58.51-118.59c11.41-23.22 49.49-23.22 60.9 0l58.55 118.59 130.89 19.04A33.975 33.975 0 0 1 759.3 453c3.98 12.27 0.66 25.77-8.59 34.8l-94.74 92.35 22.36 130.33a33.929 33.929 0 0 1-13.5 33.2c-5.9 4.31-12.93 6.5-19.96 6.5zM511.98 612.39c5.44 0 10.85 1.29 15.82 3.91l71.95 37.81L586.02 574a33.964 33.964 0 0 1 9.75-30.05l58.21-56.76-80.44-11.71c-11.08-1.59-20.63-8.56-25.57-18.58l-35.99-72.88-35.96 72.88a33.927 33.927 0 0 1-25.57 18.58l-80.44 11.71 58.21 56.76a33.973 33.973 0 0 1 9.75 30.05l-13.73 80.11 71.91-37.81c4.99-2.61 10.39-3.91 15.83-3.91z"
                        p-id="5960" fill="#707070"></path>
                </svg>
            </n-icon>
            <p class="mx-2">收藏</p>
        </div>
        <div class="flex icon-share">
            <n-icon size="20">
                <svg t="1628241472898" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="7130" width="200" height="200">
                    <path
                        d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z"
                        p-id="7131" fill="#707070"></path>
                    <path
                        d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z"
                        p-id="7132" fill="#707070"></path>
                    <path
                        d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z"
                        p-id="7133" fill="#707070"></path>
                    <path
                        d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z"
                        p-id="7134" fill="#707070"></path>
                </svg>
            </n-icon>
            <p class="mx-2" v-show="shareCount != 0">({{shareCount}})</p>
            <p class="mx-2" v-show="shareCount == 0">分享</p>
        </div>
        <div class="flex icon-download">
            <n-icon size="20">
                <svg t="1628241513205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="8179" width="200" height="200">
                    <path
                        d="M206.336 894.976c-70.144 0-110.08-39.936-110.08-110.08v-192.512c0-11.776 9.728-21.504 21.504-21.504 32.256 0 70.144-4.608 70.144 26.112v177.664c0 15.36 12.288 27.136 27.136 27.136h593.92c15.36 0 27.648-12.288 27.648-27.648v-182.272c0-11.776 9.728-21.504 21.504-21.504 32.256 0 70.144-4.608 70.144 26.112v193.024c0 70.144-34.304 104.448-104.448 104.448l-617.472 1.024z"
                        fill="#707070" p-id="8180"></path>
                    <path
                        d="M512 662.016c-23.552 0-45.568-18.944-45.568-43.008V135.68c0-23.552 22.016-26.112 45.568-26.112s45.568 2.048 45.568 26.112v483.328c0 23.552-22.016 43.008-45.568 43.008z"
                        fill="#707070" p-id="8181"></path>
                    <path
                        d="M509.952 677.888c-11.264 0-22.528-4.608-30.72-12.288L281.6 467.968c-20.992-20.992-19.968-40.96 0-60.928s40.96-25.088 60.928-5.12l166.912 166.912L686.08 392.192c14.848-14.848 36.352-5.632 53.248 11.264s24.064 38.4 7.68 54.784l-207.36 206.336c-7.68 7.68-18.944 12.288-30.72 12.288 1.024 0.512 1.024 1.024 1.024 1.024z"
                        fill="#707070" p-id="8182"></path>
                </svg>
            </n-icon>
            <p class="mx-2">下载</p>
        </div>
        <div class="flex icon-comments">
            <n-icon size="20">
                <svg t="1628241537216" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="9146" width="200" height="200">
                    <path
                        d="M783.04 268.48H240.928a32.768 32.768 0 0 0 0 65.312H783.04a32.768 32.768 0 0 0 0-65.312zM933.632 0H90.336A90.336 90.336 0 0 0 0 90.336v662.56a90.336 90.336 0 0 0 90.336 90.368H271.04v150.592a30.112 30.112 0 0 0 30.112 30.112c3.2 0 6.4 0 9.312-0.224a38.752 38.752 0 0 0 27.808-9.344l171.136-171.136h424.224A90.336 90.336 0 0 0 1024 752.896V90.336A90.336 90.336 0 0 0 933.632 0z m24.352 720a59.456 59.456 0 0 1-59.488 59.456H482.24a89.216 89.216 0 0 1-7.616 9.152l-141.024 142.048v-121.6a29.728 29.728 0 0 0-29.76-29.728H125.44a59.456 59.456 0 0 1-59.456-59.456V125.248A59.456 59.456 0 0 1 125.44 65.792h773.088a59.456 59.456 0 0 1 59.456 59.456V720z m-174.944-249.376H240.928a32.768 32.768 0 0 0 0 65.312H783.04a32.768 32.768 0 0 0 0-65.312z"
                        p-id="9147" fill="#707070"></path>
                </svg>
            </n-icon>
            <p class="mx-2">({{commentCount}})</p>
        </div>
    </div>
</template>

<script>
import {NIcon} from 'naive-ui';
import {getLyric, getSongDetail, getSongUrl} from "@/network/song/song";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
export default {
    // (播放 分享 收藏 下载) 按钮
    name: "PlayIcon",
    props: {
        id: {
            type: String,
            default: '-1'
        },
        commentCount: {
            type: Number,
            default: 0
        },
        isOne: {
            type: Boolean,
            default: true
        },
        listSong: {
            type: Array,
            default: () => []
        },
        shareCount: {
            type: Number,
            default: 0
        }
    },
    setup(props) {
        const TAG = "PlayIcon.vue";
        const store = useStore();
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const musicPlay = () => {
            // 单曲播放
            if (props.isOne == true) {
                // 设置vuex中的audio变量，给音乐播放器传输音乐数据
                let audio = {};
                getSongDetail(props.id).then(res => {
                    audio.name = res.data.songs[0].name;
                    audio.cover = res.data.songs[0].al.picUrl;
                    audio.theme = '#100f0f';
                    let arts = '';
                    if (res.data.songs[0].ar.length > 1) {
                        res.data.songs[0].ar.forEach((e) => {
                            arts += e.name;
                            arts += '/';
                        })
                    } else {
                        arts += res.data.songs[0].ar[0].name;
                    }
                    audio.artist = arts;
                })
                getSongUrl(props.id).then(res => {
                    audio.url = res.data.data[0].url;
                })
                getLyric(props.id).then(res => {
                    if (typeof (res.data.lrc) === 'undefined') {
                        return null;
                    } else {
                        audio.lrc = res.data.lrc.lyric;
                    }
                })
                // 清除播放器状态
                store.state.audio = [];
                const audioArr = new Array(audio);
                store.commit('setAudio', audioArr);
            } else {
                let lenght = props.listSong.length;
                let tmpObject = props.listSong;
                let audioList = [];
                for (let i = 0; i < lenght; i++) {
                    let audio = {};
                    getSongDetail(tmpObject[i].id).then(res => {
                        audio.name = res.data.songs[0].name;
                        audio.cover = res.data.songs[0].al.picUrl;
                        audio.theme = '#100f0f';
                        let arts = '';
                        if (res.data.songs[0].ar.length > 1) {
                            res.data.songs[0].ar.forEach((e) => {
                                arts += e.name;
                                arts += '/';
                            })
                        } else {
                            arts += res.data.songs[0].ar[0].name;
                        }
                        audio.artist = arts;
                    })
                    getSongUrl(tmpObject[i].id).then(res => {
                        audio.url = res.data.data[0].url;
                    })
                    getLyric(tmpObject[i].id).then(res => {
                        if (typeof (res.data.lrc) === 'undefined') {
                            return null;
                        } else {
                            audio.lrc = res.data.lrc.lyric;
                        }
                    })
                    audioList[i] = audio;
                }
                // 清除播放器状态
                store.state.audio = [];
                store.commit('setAudio', audioList);
            }
            beLoading();
        }
        return {
            musicPlay
        }
    },
    components: {
        NIcon
    }
}
</script>

<style scoped lang="scss">
.play-icons {
    @apply flex mt-4;
.icon-play {
    @apply p-2 cursor-pointer rounded-md hover:opacity-70 border shadow-2xl;
    background: #3483cf;
}

.icon-collect {
    @apply mx-2 p-2 cursor-pointer rounded-md hover:opacity-70 border border-gray-400;
    background: #fdfdfd;
}

.icon-share {
    @apply mx-2 p-2 cursor-pointer rounded-md hover:opacity-70 border border-gray-400;
    background: #fdfdfd;
}

.icon-download {
    @apply mx-2 p-2 cursor-pointer rounded-md hover:opacity-70 border border-gray-400;
    background: #fdfdfd;
}

.icon-comments {
    @apply mx-2 p-2 cursor-pointer rounded-md hover:opacity-70 border border-gray-400;
    background: #fdfdfd;
}
}
</style>